<template>
  <el-dialog title="编辑" :visible.sync="visible">
    <el-container>
      <el-main>
        <el-form :label-position="labelPosition" :rules="rules" :model="editSpaceForm" ref="editSpaceForm" size="mini" label-width="90px">
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="place_parkname" label="所在车场">
                <el-input v-model="editSpaceForm.place_parkname" @click.native="openPark" type="text" placeholder="所在停车场"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="place_id" label="泊位编号">
                <el-input v-model="editSpaceForm.place_id" type="text" placeholder="泊位编号"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="place_chargeunitname" label="所在路段">
                <el-input v-model="editSpaceForm.place_chargeunitname" @click.native="openRoad" type="text" placeholder="所在路段"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="place_no" label="路段内编号">
                <el-input v-model="editSpaceForm.place_no" type="text" placeholder="路段内编号"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="place_type" label="泊位类型">
                <el-select v-model="editSpaceForm.place_type" placeholder="泊位类型" style="width: 100%">
                  <el-option v-for="item in numType" :key="item.id" :value="item.id" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="place_status" label="泊位状态">
                <el-select v-model="editSpaceForm.place_status" placeholder="泊位状态" style="width: 100%">
                  <el-option v-for="item in numStatus" :key="item.id" :value="item.id" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="place_long" label="经度">
                <el-input v-model="editSpaceForm.place_long" type="text" placeholder="经度"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="place_lati" label="纬度">
                <el-input v-model="editSpaceForm.place_lati" type="text" placeholder="经度"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="place_dc" label="地磁设备">
                <el-input v-model="editSpaceForm.place_dc" type="text" placeholder="地磁设备"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="berthSize" label="泊位尺寸">
                <el-input v-model="editSpaceForm.berthSize" type="text" placeholder="泊位尺寸"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="place_remark" label="备注">
                <el-input v-model="editSpaceForm.place_remark" type="text" placeholder="备注"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" :loading="editBtn"  @click="submitForm('editSpaceForm')">确定</el-button>
        <el-button @click="closeEdit">取消</el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
  import { selDictonary } from '../../../api/dictionary'
  import { editBreth } from '../../../api/parkingResource/parkingSpace'
  import { getNum } from '../../../api/public/searchUnit'

  export default {
    name: 'parkingSpaceEdit',
    props: ['editBerthVisible', 'parkName3', 'roadName3', 'editData'],
    data() {
      return {
        visible: false,
        editBtn: false,
        labelPosition: 'left',
        numType: [], // 泊位类型
        numStatus: [], // 泊位状态
        rules: {
          place_parkname: [
            { required: true, message: '请选择车场', trigger: 'change' }
          ],
          place_id: [
            { required: true, message: '请输入泊位编号', trigger: 'blur' }
          ],
          place_chargeunitname: [
            { required: true, message: '请选择所在路段', trigger: 'change' }
          ],
          place_no: [
            { required: true, message: '请输入路段编号', trigger: 'blur' }
          ],
          place_type: [
            { required: true, message: '请选择泊位类型', trigger: 'change' }
          ],
          place_status: [
            { required: true, message: '请选择泊位状态', trigger: 'change' }
          ]
        },
        editSpaceForm: {
          place_park: '',
          place_parkname: '',
          place_id: '',
          place_chargeunitname: '',
          place_chargeunit: '',
          place_no: '',
          place_type: '',
          place_status: '',
          place_long: '',
          place_lati: '',
          place_size: '',
          place_dc: '',
          place_remark: ''
        }
      }
    },
    watch: {
      editBerthVisible: function(val) {
        this.visible = val
      },
      visible: function(val) {
        this.$emit('update:editBerthVisible', val)
      },
      parkName3: function(val) {
        this.editSpaceForm.place_parkname = val.parkname
        this.editSpaceForm.place_park = val.parkno
      },
      roadName3: function(val) {
        this.editSpaceForm.place_chargeunitname = val.unitname
        this.editSpaceForm.place_chargeunit = val.unitno
      },
      editData: function(val) {
        this.editSpaceForm = val
      }
    },
    mounted: function() {
      selDictonary().then(content => {
        for (var i = 0; i < content.length; i++) {
          if (content[i].id === 'placetype') {
            this.numType = content[i].comboboxDetailList
          } else if (content[i].id === 'enableflag') {
            this.numStatus = content[i].comboboxDetailList
          } else {
            continue
          }
        }
      })
    },
    methods: {
      submitForm: function(editSpaceForm) {
        this.$refs[editSpaceForm].validate((valid) => {
          if (valid) {
            this.editBtn = true
            editBreth(this.editSpaceForm).then(res => {
              this.editBtn = false
              this.$emit('editSearch', getNum())
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.visible = false
              this.$emit('update:parkName3', '')
              this.$emit('update:roadName3', '')
              this.$refs[editSpaceForm].resetFields()
            })
          }
        })
      },
      closeEdit: function() {
        this.visible = false
      },
      openPark: function() {
        this.$emit('openParkEdit', true)
      },
      openRoad: function() {
        this.$emit('openRoadEdit', true)
      }
    }
  }
</script>

<style scoped>
  .el-footer{
    text-align: center;
  }
</style>
